<template>
  <a-range-picker
  :value="value"
  :disabled-date="disabledDate"
  @calendarChange="handleCalendarChange"
  @change="handleDateChange"/>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    prop: String,
    cb: String,
    value: [String, Number, Array]
  },
  data() {
    return {
      startDate: {}
    }
  },
  methods: {
    // , dateValue
    handleCalendarChange(instance) {
      const startDate = instance[0]
      this.startDate = startDate
    },
    handleDateChange(instance, dateValue) {
      this.$emit('input', dateValue)
      this.$emit('handle-range-change', { cb: this.cb, prop: this.prop })
      this.startDate = {} // 重置
    },
    disabledDate(current) {
      if (this.startDate) {
        return current && current < moment(this.startDate).startOf('day')
      }
      return current && current < moment().startOf('day')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
